<template>
    <view class="position-box position-r flex">
        <view class="flex-1 position-box-item flex flex-center flex-j-center flex-ver position-r font26 lh-36" 
            :class="{active:store.common.tabIndex == index}" 
            v-for="(item,index) in tabList"
            :key="index" @click="setTabIndex(index,item)">
            <image class="icon" :src="store.common.tabIndex == index ? item.iconActive : item.icon" :style="{opacity: index == 2 ? 0 : ''}"></image>
            {{item.text}}
              
            <view v-if="index == 2" class="qrcode position-a">
                <image :src="item.icon" class="icon-qrcode"></image>
            </view>
              
        </view>
    </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted, computed } from "vue";
import { useStore } from '@/store/index.js';
import { onLoad } from "@dcloudio/uni-app";

const props = defineProps({
    
});


onLoad(() => {
	uni.hideTabBar({
	    animation: false
	})
})
const store = useStore();

const tabList = ref([
    {text:'首页',icon:'../static/home.png',iconActive:'../static/home_active.png',url:'/pages/index/index'},
    {text:'列表',icon:'../static/list.png',iconActive:'../static/list_active.png',url:'/pages/list/list'},
    {text:'扫一扫',icon:'../static/scan.png'},
    {text:'订单',icon:'../static/order.png',iconActive:'../static/order_active.png',url:'/pages/order/order'},
    {text:'我的',icon:'../static/my.png',iconActive:'../static/my_active.png',url:'/pages/me/me'}]
);


const setTabIndex = (index,item) => {
    if(index == 2) {
        
        uni.scanCode({
            success: function (res) {
                console.log(res);
                if(!store?.user?.token) {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    uni.navigateTo({
                        url: '/sub_user/pages/login/login'
                    });

                    return;
                }
                let url = res.result;
                let equipmentReg = /equipment\/([^\/]+)/
                let socketReg = /socket\/([^\/]+)/
                let equipmentMatch = url.match(equipmentReg)
                let socketMatch = url.match(socketReg)
                if(equipmentMatch && equipmentMatch[1] &&  socketMatch && socketMatch[1]) {
                    if(store?.user.token) {
                        uni.navigateTo({
                            url: '/sub_user/pages/chargePayment/chargePayment?deviceNumber='+equipmentMatch[1]+'&port='+socketMatch[1]
                        })
                    } else {
                        uni.navigateTo({
                            url: '/sub_user/pages/login/login'
                        })
                    }
                } else if(equipmentMatch && equipmentMatch[1] && !socketMatch) {
                    if(store?.user.token) {
                        uni.navigateTo({
                            url: '/sub_user/pages/chargeSelect/chargeSelect?deviceNumber='+equipmentMatch[1]
                        })
                    } else {
                        uni.navigateTo({
                            url: '/sub_user/pages/login/login'
                        })
                    }
                } else {
                    uni.showToast({
                        title:'请扫描充电设备或插座的二维码',
                        icon:'none'
                    })
                }
            }
        });
    } else {
        if(store.common.tabIndex == index) {
            return;
        }



        uni.reLaunch({
            url: item.url
        });
        store.common.SET_TABINDEX(index);
    }
    
}



</script>

<style scoped lang="scss">


.position-box {
    position: fixed;
    width:100%;
    bottom: 0rpx;
    left:0;
    background:#fff;
    padding-bottom:68rpx;

    .position-box-item {
        height: 120rpx;

        .icon {
            width:48rpx;
            height:48rpx;
        }

        &.active {
            color: #2B9951;
        }


        .qrcode {
            padding:10rpx;
            border-radius:50%;
            top:-50rpx;
            left:50%;
            background: #fff;
            overflow: hidden;
            transform: translate3d(-50%,0,0);
            .icon-qrcode {
                width: 90rpx;
                height: 90rpx;
            }
        }
    }
}
</style>